<template>
  <Block title="市场情绪" className="makret-sentiment">
    <div class="filter">
      <atom-tabs type="block" v-model="active">
        <atom-tab v-for="item in selectTabs" :key="item.value" :title="item.label" />
      </atom-tabs>
      <div class="filter-button" ref="filterButton" @click.stop="toggleShow">
        <span>筛选</span>
        <img src="../../../assets/img/unfold.svg" alt="" :class="show ? 'up' : 'down'" />
      </div>
      <Overlay
        :show="show"
        :result="result"
        :selectOptions="selectOptions"
        :standardDom="$refs.filterButton"
        :placeDistance="10"
        @closeShow="show = false"
        @updateResult="updateResult"
      >
      </Overlay>
    </div>
    <div class="contents" @scroll.stop="handleScrollStop">
      <MarketInfo v-for="(item, index) in emotionData" v-bind="item" :key="index" />
      <div class="placeholder"></div>
    </div>
  </Block>
</template>

<script>
import Block from '@/components/common/Block.vue';
import MarketInfo from '@/components/ztgy/marketSentiment/MarketInfo.vue';
import Overlay from '@/components/common/Overlay.vue';
import { detectScrollStop, errorReport } from '@/scripts/tools.js';
import { reqEmotion } from '@/apis/index.js';
const DELAYNUM = 250;
export default {
  components: {
    Block,
    MarketInfo,
    Overlay,
  },
  data() {
    return {
      selectTabs: [
        { label: '全部', value: 'main,chinext,ssestar' },
        { label: '沪深', value: 'main' },
        { label: '双创', value: 'chinext,ssestar' },
      ],
      selectOptions: [
        { label: '显示一字板涨停个股', value: 'line' },
        { label: '显示ST', value: 'st' },
      ],
      result: ['line'],
      show: false,
      activeIcon:
        '//i.thsi.cn/staticS3/mobileweb-upload-static-server.img/m/atom/67f11f92-8495-4071-8320-0124a0e8eaad.png',
      active: 0,
      emotionData: [],
    };
  },
  methods: {
    toggleShow() {
      this.show = !this.show;
    },
    updateResult(newResult) {
      this.result = newResult;
      this.show = false;
      this.getEmotion();
    },
    handleScrollStop: detectScrollStop(() => {
      window.hxmClickStat(`${_Global.stat.pageId}_scqx_analysis`, {
        url_ver: _Global.stat.url_ver,
      });
    }, DELAYNUM),
    getEmotion() {
      const resultStr = this.result.join(',');
      const selectStr = this.selectTabs[this.active].value;
      const params = { filter: `${selectStr},${resultStr}` };
      reqEmotion(params)
        .then(res => {
          const {
            mainHighToday,
            mainHighWeek,
            innovateHighToday,
            innovateHighWeek,
            limitUpToday,
            limitUpSealTodayPercent,
            limitUpYesterday,
            limitUpSealYesterdayPercent,
            nowPremiumPercent,
            openPremiumPercent,
            yesterdayPremiumPercent,
            limitDownToday,
            limitDownSealTodayPercent,
            limitDownYesterday,
            limitDownSealYesterdayPercent,
            bigRetreatToday,
            retreatTodayPercent,
            bigRetreatYesterday,
            retreatYesterdayPercent,
            brokenBoardHigh,
            rateHighPercent,
            brokenBoardLow,
            rateLowPercent,
          } = res.data;
          const plateHightOptions = {
            0: {
              type: 'rose',
              title: '连板高度',
              todayData: [
                { header: '今日双创', body: innovateHighToday },
                { header: '今日沪深', body: mainHighToday },
              ],
              lastDayData: [
                { header: '近一周双创', body: innovateHighWeek },
                { header: '近一周沪深', body: mainHighWeek },
              ],
            },
            1: {
              type: 'rose',
              title: '连板高度',
              todayData: [{ header: '今日沪深', body: mainHighToday }],
              lastDayData: [{ header: '近一周沪深', body: mainHighWeek }],
            },
            2: {
              type: 'rose',
              title: '连板高度',
              todayData: [{ header: '今日双创', body: innovateHighToday }],
              lastDayData: [{ header: '近一周双创', body: innovateHighWeek }],
            },
          };
          this.emotionData = [
            plateHightOptions[this.active],
            {
              type: 'rose',
              title: '涨停板',
              todayData: [
                { header: '今日涨停', body: limitUpToday },
                { header: '封板率', body: limitUpSealTodayPercent, type: 'M.2%' },
              ],
              lastDayData: [
                { header: '昨日涨停', body: limitUpYesterday },
                { header: '封板率', body: limitUpSealYesterdayPercent, type: 'M.2%' },
              ],
            },
            {
              type: 'rose',
              title: '昨日涨停今日表现',
              todayData: [
                { header: '当前溢价', body: nowPremiumPercent, type: 'M.2%', isRedGreen: true },
                { header: '开盘溢价', body: openPremiumPercent, type: 'M.2%', isRedGreen: true },
              ],
              lastDayData: [{ header: '昨日此时', body: yesterdayPremiumPercent, type: 'M.2%' }],
            },
            {
              type: 'drop',
              title: '跌停板',
              todayData: [
                { header: '今日跌停', body: limitDownToday },
                { header: '封板率', body: limitDownSealTodayPercent, type: 'M.2%' },
              ],
              lastDayData: [
                { header: '昨日跌停', body: limitDownYesterday },
                { header: '封板率', body: limitDownSealYesterdayPercent, type: 'M.2%' },
              ],
            },
            {
              type: 'drop',
              title: '大幅回撤个股',
              todayData: [
                { header: '今日回撤', body: bigRetreatToday },
                { header: '平均回撤', body: retreatTodayPercent, type: 'M.2%' },
              ],
              lastDayData: [
                { header: '昨日回撤', body: bigRetreatYesterday },
                { header: '平均回撤', body: retreatYesterdayPercent, type: 'M.2%' },
              ],
            },
            {
              type: 'drop',
              title: '昨日破板今表现',
              todayData: [
                { header: '高连板破板', body: brokenBoardHigh },
                { header: '平均收益', body: rateHighPercent, type: 'M.2%' },
              ],
              lastDayData: [
                { header: '低位板破板', body: brokenBoardLow, green: true },
                { header: '平均收益', body: rateLowPercent, type: 'M.2%', green: true },
              ],
            },
          ];
        })
        .catch(err => {
          errorReport({
            name: `市场情绪接口报错，${err.name}`,
            message: err.message,
            stack: err.stack,
          });
        });
    },
  },
  mounted() {
    const ONEMIN = 60000;
    const timer = setInterval(() => {
      this.getEmotion();
    }, ONEMIN);
    this.$once('hook:beforeDestory', () => {
      clearInterval(timer);
    });
  },
  activated() {
    this.getEmotion();
  },
  watch: {
    active(nval) {
      this.getEmotion();
      const statIdSuffixOptions = {
        1: 'hs',
        2: 'cyb',
      };
      if (!statIdSuffixOptions[nval]) {
        return;
      }
      window.hxmClickStat(`${_Global.stat.pageId}_pipei_${statIdSuffixOptions[nval]}`, {
        url_ver: _Global.stat.url_ver,
      });
    },
  },
};
</script>
<style lang="less" scoped>
.makret-sentiment {
  padding-right: 0;
  padding-left: 0;
  /deep/.title-contaienr {
    margin-left: 20px;
  }
}
.filter {
  padding-left: 20px;
  padding-right: 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  /deep/.atom-tabs__nav--block .atom-tab .atom-tab__text.extra-small-text {
    zoom: initial !important;
    font-size: 0.28rem !important;
  }
  /deep/.atom-tabs__nav--block .atom-tab:nth-child(4n + 1) {
    margin-left: 0 !important;
  }
  /deep/.atom-tabs__wrap {
    width: 80vw !important;
  }
  /deep/.atom-tabs__nav--block .atom-tab {
    flex-basis: 132px;
    flex-grow: 0;
  }
  .filter-button {
    width: 130px;
    display: flex;
    justify-content: center;
    align-items: center;
    span {
      font-family: PingFangSC-Regular;
      font-size: 28px;
      color: var(--text-1);
      text-align: center;
      line-height: 40px;
      font-weight: 400;
      margin-right: 6px;
    }
    img {
      width: 20px;
      height: 20px;
      color: var(--text-2);
      transition: 0.2s;
      margin-bottom: 2px;
      &.up {
        transform: rotate(180deg);
      }
      &.down {
        transform: rotate(0deg);
      }
    }
  }
}
/deep/.atom-tabs--block .atom-tabs__wrap {
  padding: 0 !important;
}
.contents {
  display: flex;
  align-items: center;
  overflow-x: auto;
  min-height: 300px;
  padding-bottom: 4px;
  &::-webkit-scrollbar {
    display: none;
  }
  /deep/.market-info{
    margin-top: 24px;
  }
  /deep/.market-info:first-child {
    margin-left: 20px;
  }
  .placeholder{
    flex-shrink: 0;
    width: 4px;
    height: 2.96rem
  }
}
</style>
